﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Html client - NorthWind54</title>
    <link href="/NorthWind/Content/cdf54.bootstrap.css" rel="stylesheet" />
    <link href="/NorthWind/Content/bootstrap.css" rel="stylesheet" />
    <link href="/NorthWind/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="/NorthWind/Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="/NorthWind/Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //http://msdn.microsoft.com/fr-fr/magazine/dn532203.aspx
            //http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
            var webApiUri = 'http://' + window.location.host + '/NorthWind/API/Product';
            var $products = $("#productsection");
            $.ajax({
                type: "GET",
                url: webApiUri,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (request, status, error) {
                    alert(request.responseText);
                },
                success: function (data) {
                    //console.debug(data)
                    $('#home').attr('href', 'http://' + window.location.host + '/NorthWind');
                    $.each(data, function (key, val) {
                        $products.append("<tr><td>" + val.productID + "</td><td>" + val.productName + "</td><td>" + val.unitPrice + "</td></tr>");
                    });
                }
            })
        });
    </script>

</head>
<body>
    <div class="container body-content">
        <a name="top"></a>
        <a id="home" class="btn btn-link"><span class="glyphicon glyphicon-home"></span> Home</a>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        Source code
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <pre style="font-family:Consolas;font-size:13;color:black;background:white;"><span style="color:blue;">&lt;</span><span style="color:maroon;">script</span>&nbsp;<span style="color:red;">type</span><span style="color:blue;">=</span><span style="color:blue;">&quot;text/javascript&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(<span style="color:blue;">function</span>&nbsp;()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green;">//http://msdn.microsoft.com/fr-fr/magazine/dn532203.aspx</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green;">//http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">var</span>&nbsp;webApiUri&nbsp;=&nbsp;<span style="color:#a31515;">&#39;http://&#39;</span>&nbsp;+&nbsp;window.location.host&nbsp;+&nbsp;<span style="color:#a31515;">&#39;/NorthWind/API/Product&#39;</span>;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">var</span>&nbsp;$products&nbsp;=&nbsp;$(<span style="color:#a31515;">&quot;#productsection&quot;</span>);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;<span style="color:#a31515;">&quot;GET&quot;</span>,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;webApiUri,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;<span style="color:#a31515;">&quot;application/json;&nbsp;charset=utf-8&quot;</span>,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;<span style="color:#a31515;">&quot;json&quot;</span>,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error:&nbsp;<span style="color:blue;">function</span>&nbsp;(request,&nbsp;status,&nbsp;error)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(request.responseText);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;<span style="color:blue;">function</span>&nbsp;(data)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green;">//console.debug(data)</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#a31515;">&#39;#home&#39;</span>).attr(<span style="color:#a31515;">&#39;href&#39;</span>,&nbsp;<span style="color:#a31515;">&#39;http://&#39;</span>&nbsp;+&nbsp;window.location.host&nbsp;+&nbsp;<span style="color:#a31515;">&#39;/NorthWind&#39;</span>);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(data,&nbsp;<span style="color:blue;">function</span>&nbsp;(key,&nbsp;val)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$products.append(<span style="color:#a31515;">&quot;&lt;tr&gt;&lt;td&gt;&quot;</span>&nbsp;+&nbsp;val.productID&nbsp;+&nbsp;<span style="color:#a31515;">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span>&nbsp;+&nbsp;val.productName&nbsp;+&nbsp;<span style="color:#a31515;">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span>&nbsp;+&nbsp;val.unitPrice&nbsp;+&nbsp;<span style="color:#a31515;">&quot;&lt;/td&gt;&lt;/tr&gt;&quot;</span>);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;});
<span style="color:blue;">&lt;/</span><span style="color:maroon;">script</span><span style="color:blue;">&gt;</span>
</pre>
                    <pre style="font-family:Consolas;font-size:13;color:black;background:white;"><span style="color:blue;">&lt;</span><span style="color:maroon;">table</span>&nbsp;<span style="color:red;">class</span><span style="color:blue;">=</span><span style="color:blue;">&quot;table&nbsp;table-striped&nbsp;table-bordered&nbsp;table-hover&nbsp;table-condensed&nbsp;tablesorter&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">thead</span>&nbsp;<span style="color:red;">style</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span>&nbsp;<span style="color:red;">background-color</span>:&nbsp;<span style="color:blue;">#006DCC</span>;&nbsp;<span style="color:red;">color</span>:&nbsp;<span style="color:blue;">white</span>;<span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">tr</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>Id<span style="color:blue;">&lt;/</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>Name<span style="color:blue;">&lt;/</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>UnitPrice<span style="color:blue;">&lt;/</span><span style="color:maroon;">th</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;/</span><span style="color:maroon;">tr</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;/</span><span style="color:maroon;">thead</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">tbody</span>&nbsp;<span style="color:red;">id</span><span style="color:blue;">=</span><span style="color:blue;">&quot;productsection&quot;</span><span style="color:blue;">&gt;&lt;/</span><span style="color:maroon;">tbody</span><span style="color:blue;">&gt;</span>
<span style="color:blue;">&lt;/</span><span style="color:maroon;">table</span><span style="color:blue;">&gt;</span>
</pre>
                </div>
            </div>
        </div>

        <h2>WebApi Client Products with Ajax/JQuery in html page</h2>
        <table class="table table-striped table-bordered table-hover table-condensed tablesorter">
            <thead style=" background-color: #006DCC; color: white;">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>UnitPrice</th>
                </tr>
            </thead>
            <tbody id="productsection"></tbody>
        </table>
        <a class="btn btn-link" href="#top"><span class="glyphicon glyphicon-arrow-up"></span> Top</a>
    </div>
</body>
</html>
